import { getCssExpressionValue,getFuncExpressionInfo } from '../../utils/utils.js'


const tagWhiteList=['view','text','image','input','button','select','dialog','empty']

//将wxml标签转换为vue标签
export function makeTagStart(opts) {
    const {tag,attrs}=opts
    if(!tagWhiteList.includes(tag)){
        throw tag+'组件不支持';
    }

    const transTag=`ui-${tag}`
    console.log("attrs:",attrs)
    //获取属性字符串
    const attrsStr=getPropsStr(attrs);
    if(attrs.length){
        return `<${transTag} ${attrsStr}>`
    }
    //没有属性
    return `<${transTag}>`
}

//获取结束标签中的标签名
export function makeTagEnd(tag) {
    return `</ui-${tag}>`
}

//将wxml标签属性转换为vue标签属性
function getPropsStr(attrs){
    const attrsList=[];
    attrs.forEach((attrInfo,index)=>{
        const {name,value}=attrInfo;
        if(name==='style'){
            attrsList.push({name:`v-bind:style`,value:getCssRules(value)})
            return false;
        }

        if(/^bind/.test(name)){
            if(name=='bindtap'){
                //判断是不是bindtap点击事件
                attrsList.push({name:`v-bind:${name}.native`,value:getFuncExpressionInfo(value)});
            }else if(name=='catchtap'){
                //判断是不是catchtap阻止冒泡点击事件
                attrsList.push({name:`v-bind:${name}.stop`,value:getFuncExpressionInfo(value)});
            }else if(name=='bindinput'){
                //判断是不是bindinput输入事件
                attrsList.push({name:`${name}`,value:value});
            //}else if(name=='bindclose'){
                //判断是不是bindclose输入事件,dialog组件关闭事件
                // attrsList.push({name:`${name}`,value:value});
            }
            return false;
        }

        if(name=='wx:if'){
            attrsList.push({name:`v-if`,value:getExpression(value)})
            return false;
        }
        if(name=='wx:elif'){
            attrsList.push({name:`v-else-if`,value:getExpression(value)})
            return false;
        }
        if(name=='wx:else'){
            attrsList.push({name:`v-else`,value:getExpression(value)})
            return false;
        }

        if(name=='wx:for'){
            attrsList.push({name:`v-for`,value:getForExpression(value)})
            return false;
        }

        if(name=='wx:key'){
            attrsList.push({name:`v-bind:key`,value:'item.'+value})
            return false;
        }

        if(/^{{.*}}$/.test(value)){
            attrsList.push({name:`v-bind:`+name,value:getExpression(value)})
            return false;
        }

        attrsList.push({name,value})
    })

    return linkAttrs(attrsList);
}

//解析style
function getCssRules(cssRule){
    const cssCode=cssRule.trim();
    const cssRules=cssCode.split(';');
    const list=[];
    cssRules.forEach(rule=>{
        if(!rule){
            return;
        }
        const [name,value]=rule.split(':');
        const attr=name.trim();
        const ruleValue=getCssExpressionValue(value.trim());
        list.push(`'${attr}':${ruleValue}`)
    })
    return `{${list.join(',')}}`;
}

//解析表达式
function getExpression(wxExpression){
    const re=/\{\{(.+?)\}\}/;
    const matchResult=wxExpression.match(re);
    const result=matchResult?matchResult[1].trim():'';
    return result;
}
//解析for表达式
function getForExpression(wxExpression){
    const listVariableName=getExpression(wxExpression);
    return '(item,index) in '+listVariableName;
}

//vue标签属性数组转换为字符串
function linkAttrs(attrsList){
    const result=[];
    attrsList.forEach(attrInfo=>{
        const {name,value}=attrInfo;
        result.push(`${name}="${value}"`)
    })
    return result.join(' ')
}
